<template>
  <div class="points-report">
    <!-- 积分统计 -->
    <el-row :gutter="20" class="stat-row">
      <el-col :span="6">
        <el-statistic title="累计发放积分" :value="totalIssued" :precision="0" />
      </el-col>
      <el-col :span="6">
        <el-statistic title="累计消耗积分" :value="totalConsumed" :precision="0" />
      </el-col>
      <el-col :span="6">
        <el-statistic title="当前剩余积分" :value="totalRemaining" :precision="0" />
      </el-col>
      <el-col :span="6">
        <el-statistic title="积分使用率" :value="usageRate" suffix="%" :precision="1" />
      </el-col>
    </el-row>

    <!-- 积分趋势 -->
    <el-card style="margin-top: 20px;">
      <template #header>
        <span>📊 积分变化趋势</span>
      </template>
      <div class="chart-container" ref="pointsTrendChart"></div>
    </el-card>

    <!-- 积分来源和使用 -->
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="12">
        <el-card>
          <template #header>
            <span>💰 积分获取途径</span>
          </template>
          <div class="chart-container" ref="pointsSourceChart"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <template #header>
            <span>🎁 积分使用途径</span>
          </template>
          <div class="chart-container" ref="pointsUsageChart"></div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 积分明细 -->
    <el-card style="margin-top: 20px;">
      <template #header>
        <span>📋 积分明细数据</span>
      </template>
      <el-table :data="pointsData" border stripe>
        <el-table-column prop="memberName" label="会员姓名" width="120" />
        <el-table-column prop="phone" label="手机号" width="130" />
        <el-table-column prop="totalEarned" label="累计获得" width="120">
          <template #default="{ row }">
            <el-tag type="success">+{{ row.totalEarned }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="totalUsed" label="累计使用" width="120">
          <template #default="{ row }">
            <el-tag type="warning">-{{ row.totalUsed }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="balance" label="当前余额" width="120">
          <template #default="{ row }">
            <span style="font-weight: bold;">{{ row.balance }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="lastEarned" label="最近获得" width="160" />
        <el-table-column prop="expiringSoon" label="即将过期" width="120">
          <template #default="{ row }">
            <el-tag v-if="row.expiringSoon > 0" type="danger">
              {{ row.expiringSoon }}
            </el-tag>
            <span v-else>-</span>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'

const props = defineProps({
  dateRange: { type: Array, default: () => [] }
})

const totalIssued = ref(15678900)
const totalConsumed = ref(8765432)
const totalRemaining = ref(6913468)
const usageRate = ref(55.9)

const pointsData = ref([
  { memberName: '张三', phone: '13800138001', totalEarned: 12560, totalUsed: 8900, balance: 3660, lastEarned: '2024-01-20 14:30', expiringSoon: 500 },
  { memberName: '李四', phone: '13800138002', totalEarned: 9876, totalUsed: 6543, balance: 3333, lastEarned: '2024-01-19 10:15', expiringSoon: 0 }
])

const pointsTrendChart = ref(null)
const pointsSourceChart = ref(null)
const pointsUsageChart = ref(null)

onMounted(() => {
  initPointsTrendChart()
  initPointsSourceChart()
  initPointsUsageChart()
})

const initPointsTrendChart = () => {
  const chart = echarts.init(pointsTrendChart.value)
  chart.setOption({
    tooltip: { trigger: 'axis' },
    legend: { data: ['发放积分', '消耗积分', '剩余积分'] },
    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月']
    },
    yAxis: { type: 'value' },
    series: [
      {
        name: '发放积分',
        type: 'bar',
        data: [1234567, 1345678, 1456789, 1389012, 1498765, 1567890, 1678901],
        itemStyle: { color: '#67c23a' }
      },
      {
        name: '消耗积分',
        type: 'bar',
        data: [678901, 789012, 890123, 756789, 898765, 987654, 1098765],
        itemStyle: { color: '#e6a23c' }
      },
      {
        name: '剩余积分',
        type: 'line',
        data: [5555666, 6112332, 6678998, 7311221, 7911221, 8491457, 9071593],
        itemStyle: { color: '#409eff' }
      }
    ]
  })
}

const initPointsSourceChart = () => {
  const chart = echarts.init(pointsSourceChart.value)
  chart.setOption({
    tooltip: { trigger: 'item' },
    series: [
      {
        name: '积分来源',
        type: 'pie',
        radius: '60%',
        data: [
          { value: 5678900, name: '消费获得' },
          { value: 2345678, name: '签到获得' },
          { value: 987654, name: '任务奖励' },
          { value: 654321, name: '推荐奖励' },
          { value: 345678, name: '活动赠送' }
        ]
      }
    ]
  })
}

const initPointsUsageChart = () => {
  const chart = echarts.init(pointsUsageChart.value)
  chart.setOption({
    tooltip: { trigger: 'item' },
    series: [
      {
        name: '积分使用',
        type: 'pie',
        radius: '60%',
        data: [
          { value: 4567890, name: '积分兑换' },
          { value: 2345678, name: '抵扣现金' },
          { value: 987654, name: '兑换优惠券' },
          { value: 654321, name: '补签使用' },
          { value: 209889, name: '其他' }
        ]
      }
    ]
  })
}
</script>

<style scoped>
.points-report {
  padding: 20px 0;
}

.stat-row {
  padding: 20px;
  background: white;
  border-radius: 8px;
  margin-bottom: 20px;
}

.chart-container {
  height: 350px;
}
</style>

